<template>
  <el-tree-select :node-key="props.props.value" :props="props.props"  :data="value">
    <template #default="{ data }">
      <span>{{data[props.props.label]}}</span>
    </template>
  </el-tree-select>
</template>
<script setup lang="ts" >
import {isRef, ref, watch} from "vue";

const props = defineProps({
  data: {
    type: [Object, Array],
    default: []
  },
  props: {
    type: Object,
    default: {
      label: 'label',
      value: 'id',
      children: 'children',
      disabled: 'disabled',
    }
  }
})
const value = ref([])
watch(()=> props.data,(newValue: any)=>{
  console.log(newValue)
  if(newValue){
    value.value = isRef(newValue) ? newValue.value  : newValue
  }

},{
  deep: true,
  immediate: true
})

</script>

<style scoped>

</style>